<template>
    <div class="sponsor" id="sponsor">
        <div class="sponsor-wrapper">
            <!-- <img class="home-title" src="https://static.inclusionconf.com/static/images/org-title.png" alt="">
        <div class="sponsor-list sponsor-list1">
            <div class="sponsor-item">
                <img :src="ite.logoUrl" v-for="(ite, ind) in orgList" :key="ind + 'dbc' + ind" alt="">
            </div>
        </div> -->
            <image class="home-title" id="cooperate" src="https://static.inclusionconf.com/static/images/cooperation-title-new.png" alt="" mode="heightFix">
            <div class="sponsor-list sponsor-list1" v-for="(item, index) in isPc ? partnerList : partnerListWap" :key="index">
                <div class="sponsor-item" v-for="(ite, ind) in item" :key="index + 'bc' + ind">
                    <h2 v-if="ite['name' + En]">{{ ite['name' + En] }}</h2>
                    <image class="img" :src="ite.logoUrl" alt="" mode="widthFix">
                </div>
            </div>

            <!-- <div class="btn hover-btn" @click="link">{{ $t('joinHome') }} <i><img src="https://static.inclusionconf.com/static/images/jiantou.png" alt=""></i></div> -->
        </div>

        <uni-transition name="fade">
            <div class="mask" ref="cooperationmask" v-show="showMask" @click="showMask = false">
                <div class="mask-content" @click.stop>
                    <image class="close" src="https://static.inclusionconf.com/static/images/close-icon.png" alt="" @click.stop="showMask = false" mode="widthFix">
                    <image :src="detail.logoUrl" alt="" class="mask-logo" mode="widthFix">
                    <div class="mask-title">{{ detail['name' + En] }}</div>
                    <div class="mask-text">
                        <p v-html="getText(detail['blurb' + En])"></p>
                    </div>
                    <div class="btn" :class="En ? 'en' : ''" @click="submit(detail.websiteUrl)" v-if="detail.websiteUrl">{{ $t('inWeb') }} <i class="el-icon-right"></i></div>
                </div>
            </div>
        </uni-transition>
    </div>
</template>

<script>
import protal from "@/api/protal"

export default {
    props: {
        title: ''
    },
    data() {
        return {
            list1: [],
            list2: [],
            showMask: false,
            detail: {},
            orgList: [
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/qh.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/fd.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/ft.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/tj.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/zj.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/by.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/wt.png'
                },
                {
                    logoUrl: 'https://static.inclusionconf.com/static/images/my.png'
                },
            ],
            partnerList: [
                [
                    {
                        name: 'Diamond Sponsor',
                        nameEn: 'Diamond Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-1-t1.png'
                    },
                    {
                        name: 'Platinum Sponsor',
                        nameEn: 'Platinum Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-2.png'
                    },
                    {
                        name: 'Silver Sponsor',
                        nameEn: 'Silver Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-3.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-4.png'
                    },
                ],
                [
                    {
                        name: 'Bronze Sponsor',
                        nameEn: 'Bronze Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-1.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-2.png'
                    },
                    {
                        name: '战略合作媒体',
                        nameEn: 'Strategic Media Partners',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-3.png'
                    },
                    {
                        name: '特邀合作媒体',
                        nameEn: 'Officially Invited Media Partners',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-4.png'
                    },
                ],
                [
                    {
                        name: '特别支持媒体',
                        nameEn: 'Special Media Support',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-1.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-2.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-3.png'
                    },
                ],
                [
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line4-1.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line4-2-t1.png'
                    },
                ],
            ],
            partnerListWap: [
                [
                    {
                        name: 'Diamond Sponsor',
                        nameEn: 'Diamond Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-1-t1.png'
                    },
                    {
                        name: 'Platinum Sponsor',
                        nameEn: 'Platinum Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-2.png'
                    },
                    {
                        name: 'Silver Sponsor',
                        nameEn: 'Silver Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-3.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line1-4.png'
                    },
                ],
                [
                    {
                        name: 'Bronze Sponsor',
                        nameEn: 'Bronze Sponsor',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-1.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-2.png'
                    },
                    {
                        name: '战略合作媒体',
                        nameEn: 'Strategic Media Partners',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-3.png'
                    },
                    {
                        name: '特邀合作媒体',
                        nameEn: 'Officially Invited Media Partners',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line2-4.png'
                    },
                ],
                [
                    {
                        name: '特别支持媒体',
                        nameEn: 'Special Media Support',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-1.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-2.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line3-3.png'
                    },
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line4-1.png'
                    },
                ],
                [
                    {
                        name: '',
                        nameEn: '',
                        logoUrl: 'https://static.inclusionconf.com/static/images/partner-line4-2-t1.png'
                    },
                ],
            ]
        }
    },
    created() {
        this.init()
    },
    computed: {
        getText() {
            return v => {
                return v ? v.replace(/\\n/g, '<i></i>') : ''
            }
        }
    },
    watch: {
        showMask(v) {
            if (v) {
                document.body.style.overflowY = 'hidden'
            } else {
                document.body.style.overflowY = 'auto'
            }
        }
    },
    methods: {
        init() {
            protal.sponsorList().then(res => {
                this.list1 = res.data
            })
            protal.partnersList().then(res => {
                this.list2 = res.data.filter(x => ['战略合作媒体', '特别支持媒体'].includes(x.name))
            })
        },
        sponsorLink(ite, item) {
            this.jsAPI('waitan_coopClick', {
                industryFirstCate_var: item.name,
                contentID_var: ite.uuid,
                contentName_var: ite.name
            })
            if (item.exhibitor) return
            protal.sponsorDetail(ite.uuid).then(res => {
                this.detail = res.data || {}
                if (this.detail['blurb' + this.En]) {
                    this.showMask = true
                }
            })
        },
        partnersLink(ite, item) {
            debugger
            this.jsAPI('waitan_coopClick', {
                industryFirstCate_var: item.name,
                contentID_var: ite.uuid,
                contentName_var: ite.name
            })
            if (item.exhibitor) return
            protal.partnersDetail(ite.uuid).then(res => {
                this.detail = res.data
                if (this.detail['blurb' + this.En]) {
                    this.showMask = true
                }
            })
        },
        submit(url) {
            this.jsAPI('waitan_enterHomeClick', {
                contentID_var: this.detail.uuid,
                contentName_var: this.detail.name,
                industryFirstCate_var: '无',
            })
            window.open(url, '_blank')
        },
        link() {
            this.$router.push({
                name: 'join'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
    .sponsor {
        // background: url(https://static.inclusionconf.com/static/images/sponsor.png);
        // background-size: 100% 100%;
        background-color: #FCFCFF;

        .sponsor-wrapper {
            max-width: 1360px;
            padding: 68px 40px 80px;
            margin: 0 auto;

            .btn {
                width: 223px;
                height: 60px;
                margin: 88px auto 0;
                background: linear-gradient(to right, #1A39D6, #7F51D2);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_65_Medium;
                font-size: 28px;
                color: #FFFFFF;
                line-height: 28px;
                text-align: left;
                font-style: normal;
                cursor: pointer;
                transition: .3s;

                i {
                    margin-left: 11px;
                    font-size: 28px;

                    img {
                        width: 28px;
                        height: auto;
                    }
                }

                &.en {
                    width: 620px;
                    font-size: 20px;
                }
            }
        }

        .home-title {
            margin-bottom: 40px;
        }

        .sponsor-list {
            display: flex;

            .sponsor-item {
                margin-bottom: 18px;
                margin-right: 18px;
                width: calc(25% - 14px);
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                h2 {
                    font-family: AlibabaSans102Ver2, AlibabaSans102Ver2, AlibabaPuHuiTi_3_65_Medium;
                    font-weight: 500;
                    font-size: 24px;
                    color: #181818;
                    line-height: 24px;
                    text-align: left;
                    font-style: normal;
                    margin-bottom: 31px;
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -8px;
                        width: 60px;
                        height: 3px;
                        background: rgba(120, 77, 255, 1);
                        opacity: 0.5;
                    }
                }

                img {
                    width: 100%;
                    height: auto;

                    &:nth-child(4n) {
                        margin-right: 0;
                    }
                }
            }

            &.sponsor-list {

                h2 {
                    font-size: 28px;
                }
            }
        }

        .mask {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 6, 50, 0.20);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .mask-content {
                position: absolute;
                width: 800px;
                height: 580px;
                background: #FFFFFF;
                padding-top: 48px;

                .close {
                    position: absolute;
                    width: 20px;
                    right: 12px;
                    top: 20px;
                    cursor: pointer;
                }

                .mask-logo {
                    width: auto;
                    height: 102px;
                    margin: 0 auto;
                }

                .mask-title {
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 28px;
                    color: #181818;
                    line-height: 28px;
                    text-align: center;
                    font-style: normal;
                    margin: 40px 0 16px;
                }

                .mask-text {
                    padding: 0 24px 0 40px;
                    height: 180px;
                    margin-bottom: 54px;

                    p {
                        width: 100%;
                        height: 180px;
                        overflow-y: auto;
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 16px;
                        color: #181818;
                        line-height: 26px;
                        text-align: justify;
                        font-style: normal;
                        padding-right: 12px;
                        padding-top: 5px;

                        &::-webkit-scrollbar {
                            width: 4px;
                            background: rgba(0, 0, 0, 0.10);
                        }

                        &::-webkit-scrollbar-thumb {
                            width: 4px;
                            background: rgba(0, 0, 0, 0.20);
                        }

                        /deep/ i {
                            display: block;
                            margin-bottom: 8px;
                        }
                    }
                }

                .btn {
                    width: 183px;
                    height: 52px;
                    margin: 0 auto;
                    background: linear-gradient(to right, #1A39D6, #7F51D2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 20px;
                    text-align: left;
                    font-style: normal;
                    cursor: pointer;

                    i {
                        margin-left: 12px;
                        font-size: 20px;
                    }

                    &.en {
                        width: 320px;
                    }

                    &:hover {
                        padding: 0 4px;

                        i {
                            margin-left: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1470px) and (min-width: 768px) {
    .sponsor {

        .sponsor-wrapper {
            max-width: 1360px;
            padding: 68px 40px 80px;
            margin: 0 auto;
        }

        .mask {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 6, 50, 0.20);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .mask-content {
                position: absolute;
                width: 800px;
                height: 580px;
                background: #FFFFFF;
                padding-top: 48px;

                .close {
                    position: absolute;
                    width: 20px;
                    right: 12px;
                    top: 20px;
                    cursor: pointer;
                }

                .mask-logo {
                    width: auto;
                    height: 102px;
                    margin: 0 auto;
                }

                .mask-title {
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 28px;
                    color: #181818;
                    line-height: 28px;
                    text-align: center;
                    font-style: normal;
                    margin: 40px 0 16px;
                }

                .mask-text {
                    padding: 0 24px 0 40px;
                    height: 180px;
                    margin-bottom: 54px;

                    p {
                        width: 100%;
                        height: 180px;
                        overflow-y: auto;
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 16px;
                        color: #181818;
                        line-height: 26px;
                        text-align: justify;
                        font-style: normal;
                        padding-right: 12px;
                        padding-top: 5px;

                        &::-webkit-scrollbar {
                            width: 4px;
                            background: rgba(0, 0, 0, 0.10);
                        }

                        &::-webkit-scrollbar-thumb {
                            width: 4px;
                            background: rgba(0, 0, 0, 0.20);
                        }

                        /deep/ i {
                            display: block;
                            margin-bottom: 8px;
                        }
                    }
                }

                .btn {
                    width: 183px;
                    height: 52px;
                    margin: 0 auto;
                    background: linear-gradient(to right, #1A39D6, #7F51D2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 20px;
                    text-align: left;
                    font-style: normal;
                    cursor: pointer;

                    i {
                        margin-left: 12px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .sponsor {
        // background: url(https://static.inclusionconf.com/static/images/sponsor.png) no-repeat;
        // background-size: 100% auto;
        background-color: #FCFCFF;

        .sponsor-wrapper {
            width: 100%;
            padding: 25px 18px .54rem;
			box-sizing: border-box;
            margin: 0 auto;

            .btn {
                width: 147px;
                height: 40px;
                margin: 13px auto 0;
                background: linear-gradient(to right, #1A39D6, #7F51D2);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_65_Medium;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                cursor: pointer;

                i {
                    margin-left: 6px;
                    font-size: 14px;

                    img {
                        width: 14px;
                        height: auto;
                    }
                }

                &.en {
                    width: 240px;
                    padding: 0 30px;
                    height: 60px;
                    line-height: 16px;
                    font-weight: normal;
                }
            }
        }

        .home-title {
            margin-bottom: 22px;
        }

        .sponsor-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;

            .sponsor-item {
                margin-bottom: 9px;
                width: calc(50% - 5px);
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                h2 {
                    font-family: AlibabaSans102Ver2, AlibabaSans102Ver2, AlibabaPuHuiTi_3_65_Medium;
                    font-weight: 500;
                    font-size: 15px;
                    color: #181818;
                    line-height: 15px;
                    text-align: left;
                    font-style: normal;
                    margin-bottom: 18px;
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -8px;
                        width: 60px;
                        height: 3px;
                        background: rgba(120, 77, 255, 1);
                        opacity: 0.5;
                    }
                }

                .img {
                    width: 100%;
                    height: auto;

                    &:nth-child(4n) {
                        margin-right: 0;
                    }
                }
            }
        }

        .mask {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 6, 50, 0.20);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .mask-content {
                position: absolute;
                width: 6.78rem;
                min-height: 460px;
                background: #FFFFFF;
                padding-top: 20px;
                padding-bottom: 40px;

                .close {
                    position: absolute;
                    width: .3rem;
                    right: .36rem;
                    top: .38rem;
                }

                .mask-logo {
                    width: auto;
                    height: 65px;
                    margin: 0 auto;
                }

                .mask-title {
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 24px;
                    color: #181818;
                    line-height: 24px;
                    text-align: center;
                    font-style: normal;
                    margin: 30px 0 14px;
                }

                .mask-text {
                    padding: 0 14px 0 26px;
                    height: 175px;
                    margin-bottom: 53px;

                    p {
                        width: 100%;
                        height: 175px;
                        overflow-y: auto;
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 12px;
                        color: #181818;
                        line-height: 20px;
                        text-align: justify;
                        font-style: normal;
                        padding-right: 10px;

                        &::-webkit-scrollbar {
                            width: 2px;
                            background: rgba(0, 0, 0, 0.10);
                        }

                        &::-webkit-scrollbar-thumb {
                            width: 2px;
                            background: rgba(0, 0, 0, 0.20);
                        }

                        /deep/ i {
                            display: block;
                            margin-bottom: 14px;
                        }
                    }
                }

                .btn {
                    width: 147px;
                    height: 40px;
                    margin: 0 auto;
                    background: linear-gradient(to right, #1A39D6, #7F51D2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: AlibabaPuHuiTi_3_65_Medium;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                    cursor: pointer;

                    i {
                        margin-left: 10px;
                        font-size: 14px;
                    }

                    &.en {
                        width: 170px;
                        padding: 0 20px;
                    }
                }
            }
        }
    }
}
</style>
